<template>
	<div class="work_area" id="work_area">
		<div class="work">
			<div class="title">
				<span v-on:click="trade(1)" :class="{ 'active': trade_index == 1 }">普通委托</span>
				<span v-on:click="trade(2)" :class="{ 'active': trade_index == 2 }">止盈止损委托</span>
				<span v-on:click="trade(3)" :class="{ 'active': trade_index == 3 }">计划委托</span>
			</div>
			<div v-if="trade_index == 1">
				<commontabel></commontabel>
			</div>
			<div v-if="trade_index == 2">
				22222
			</div>
			<div v-if="trade_index == 3">
				33333
			</div>
		</div>
	</div>
</template>

<script>
	import commontabel from './common_table';
	export default {
		name: 'work_area',
		computed: {
			
		},
		data() {
			return {
				title: '',
				trade_index: 1,
			}
		}, //定义变量
		components: {
			commontabel,
		}, //注册组件
		methods: { //方法都在这里
			trade: function(index) {
				this.trade_index = index;
			}
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<style lang="scss">
	.work_area{
		text-align: left;
		h1{
			text-align: left;
			font-size: 24px;
			font-weight: normal;
			background:#ECECEC;
			padding:15px 0 15px 60px;
			margin-bottom:20px;
		}
		.work {
			.title {
				background: #f4f4f4;
				height: 44px;
				font-size: 14px;
				span {
					width: 175px;
					height: 44px;
					display: inline-block;
					text-align: center;
					line-height: 44px;
					cursor: pointer;
				}
			}
			.active {
				background-color: #fff;
				color: #0093f1;
				font-size: 14px;
				font-weight: 600;
				border-top: 3px solid #0093f1;
			}
			.market_work {}
		}
	}
</style>